<template>
    <div>
        <MaterialResPlayer
            :material="props.fileData"
            :video-options="{ autoplay: false, controlBar: {pictureInPictureToggle: false}}"
            class="tpkcw-res"
            :downloadable="false"
            :width="playerConf.width"
            :height="playerConf.height"/>
    </div>
</template>

<script setup>
import { MaterialResPlayer } from '@yanxiu/player';
import { reactive } from 'vue';

const props = defineProps({
    fileData: {
        type: Object,
        default: () => {}
    }
})

const COURSE_WIDTH = 1100;
const COURSE_HEIGHT = 488;

let playerConf = reactive({
    width: COURSE_WIDTH,
    height: COURSE_HEIGHT
})
</script>